<template>
  <el-cascader ref="compRef" v-model="value" v-bind="{ ...$props }">
    <template v-for="(_slot, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" v-bind="slotProps" :key="slotName"></slot>
    </template>
  </el-cascader>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { CascaderNode, CascaderProps, ElCascader } from "element-plus";
import { BaseCascaderExpose } from "./types";
type Cascader = {
  modelValue: string | number | object;
  options: Record<string, unknown>[];
  props?: CascaderProps;
  size?: "large" | "default" | "small";
  placeholder?: string;
  disabled?: boolean;
  clearable?: boolean;
  showAllLevels?: boolean;
  collapseTags?: boolean;
  collapseTagsTooltip?: boolean;
  separator?: string;
  filterable?: boolean;
  debounce?: number;
  filterMethod?: (node: CascaderNode, keyword: string) => boolean;
  beforeFilter?: (value: string) => boolean;
  popperClass?: string;
  teleported?: boolean;
  tagType?: "success" | "info" | "warning" | "danger";
  tagEffect?: "light" | "dark" | "plain";
  validateEvent?: boolean;
  maxCollapseTags?: number;
  emptyValues?: any[];
  persistent?: boolean;
  popperAppendToBody?: boolean;
  placement?:
    | "top"
    | "top-start"
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end"
    | "right"
    | "right-start"
    | "right-end";
};

type Props = Partial<Cascader>;

/** 需要按照官网文档设置默认值，否则表现效果和官网文档的不一致 */
withDefaults(defineProps<Props>(), {
  showAllLevels: true,
  separator: " / ",
  debounce: 300,
  teleported: true,
  tagType: "info",
  tagEffect: "light",
  validateEvent: true,
  maxCollapseTags: 1,
  persistent: true,
  placement: "bottom-start",
  popperAppendToBody: true,
});

const value = defineModel();
const compRef = ref();

defineExpose<BaseCascaderExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss"></style>
